<template>
  <div class="follow-page">
    <van-nav-bar title="我的关注" fixed></van-nav-bar>
     <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :key="item.id"
            >
            <!-- title插槽显示头像和名字 -->
            <template #title>
              <van-image round width="60" :src="item.photo" />
              <div class="name">
                <h3>{{ item.name }}</h3>
                <span>粉丝数量：{{ item.fans_count }}</span>
              </div>
            </template>
            <template #right-icon>
              <van-tag type="warning" v-if="item.mutual_follow">互关</van-tag>
              <van-button type="primary" size="small" @click="cancelFollow(item.id)">取消关注(接口不可用)</van-button>
            </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
  </div>
</template>

<script>

// 导入接口
import { getFollowList, unFollowUser } from '@/api/home.js'
// 导入moment
import moment from 'moment'
// 设置语言
moment.locale('zh-cn')

export default {

  name: 'FollowPage',
  data () {
    return {
      // 1.当前页
      page: 1,
      // 2.每页数量
      per_page: 10,
      // 3.列表
      list: [],
      // 4.加载动画
      loading: false,
      // 5.是否全部加载完毕
      finished: false,
      // 6.下拉刷新动画
      isLoading: false
    }
  },
  methods: {
    // 加载事件
    async onLoad () {
      // (1)发送ajax
      const data = await getFollowList({
        page: this.page,
        per_page: this.per_page
      })
      console.log(data)
      // (2)绑定到data : 往数组后面添加
      this.list.push(...data.data.data.results)
      // (3)页码++
      this.page++
      // (4)手动关闭动画 ： 否则会一直转圈
      this.loading = false
      // (5)如果全部加载完毕，设置finished为true
      if (data.data.data.results.length === 0) {
        this.finished = true
      }
    },
    onRefresh () {
      // 0.一旦下拉刷新，无条件的设置finished为false(保证刷新之后可以正常上拉加载更多)
      this.finished = false
      this.page = 1
      // 1.先清空旧数据
      this.list = []
      // 2.设置上拉加载更多状态为true(开启底部加载中动画)
      this.loading = true
      // 3.重新请求数据
      this.onLoad()
      // 4.关闭上拉刷新动画（如果不写，上面的上拉刷新动画会一直转圈）
      this.isLoading = false
    },
    getTime (date) {
      return moment(date).fromNow()
    },
    async cancelFollow (target) {
      await unFollowUser({ target })
      this.$toast.success('取消关注成功')
      this.onRefresh()
    }
  }
}
</script>

<style lang="less" scoped>
.follow-page {

  margin-top: 44px;
  height: 100vh;
  overflow-y: scroll;
  .van-list{
    margin-bottom: 50px;
  }
  .van-nav-bar{
    background-color: #3296fa;
    /deep/ .van-nav-bar__title{
      color: #fff;
    }
  }
  .van-cell{
    height: 100px;
    .van-cell__title{
      .name{
        display: inline-block;
        margin-left: 15px;
      }
    }
  .van-tag--warning{
    margin-top: 30px;
    height: 20px;
  }
    .van-button{
      margin-top: 24px;
      margin-left: 20px;
    }
  }

}
</style>
